<template>
  <div>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>美多商城-商品详情</title>
    </head>
    <body>
    <div id="app" v-cloak>
      <div class="header_con">
        <div class="header">
          <div class="welcome fl">欢迎来到美多商城!</div>
          <div class="fr">
            <div class="login_btn fl" v-if="username">
              欢迎您：<em>[[ username ]]</em>
              <span>|</span>
              <a href="/logout/" class="quit">退出</a>
            </div>
            <div class="login_btn fl" v-else>
              <a href="http://localhost:8080/#/login">登录</a>
              <span>|</span>
              <a href="http://localhost:8080/#/regi">注册</a>
            </div>

            <div class="user_link fl">
              <span>|</span>
              <a href="http://localhost:8080/#/user_center_site">用户中心</a>
              <span>|</span>
              <a href="/carts/">我的购物车</a>
              <span>|</span>
              <a href="/orders/">我的订单</a>
            </div>
          </div>
        </div>
      </div>

      <div class="search_bar clearfix">
        <a href="index.html" class="logo fl"><img src="../../../static/images/logo.png"></a>
        <div class="search_wrap fl">
          <form method="get" action="/search/" class="search_con">
            <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
            <input type="submit" class="input_btn fr" name="" value="搜索">
          </form>
          <ul class="search_suggest fl">
            <li><a href="#">索尼微单</a></li>
            <li><a href="#">优惠15元</a></li>
            <li><a href="#">美妆个护</a></li>
            <li><a href="#">买2免1</a></li>
          </ul>
        </div>

        <div class="guest_cart fr">
          <a href="/carts/" class="cart_name fl">我的购物车</a>
          <div class="goods_count fl" id="show_count">[[ cart_total_count ]]</div>
          <ul class="cart_goods_show">
            <li v-for="cart in carts">
              <img :src="cart.default_image_url" alt="商品图片">
              <h4>[[ cart.name ]]</h4>
              <div>[[ cart.count ]]</div>
            </li>
          </ul>
        </div>
      </div>

      <div class="navbar_con">
        <div class="navbar">
          <div class="sub_menu_con fl">
            <h1 class="fl">商品分类</h1>
            <ul class="sub_menu">
              <li v-for="i in catelist">
                <div class="level1">
                  <a href="http://shouji.jd.com/">{{ i.name }}</a>
                </div>
                <div class="level2">
                  <div class="list_group" v-for="j in i.subs">
                    <div class="group_name fl">{{ j.name }} &gt;</div>
                    <div class="group_detail fl">
                      <a href="#" v-for="k in j.subs">{{ k.name }}</a>

                    </div>
                  </div>

                </div>
              </li>

            </ul>
          </div>

          <ul class="navlist fl">
            <li><a href="http://localhost:8080/#/home">首页</a></li>
            <li class="interval">|</li>
            <li><a href="">真划算</a></li>
            <li class="interval">|</li>
            <li><a href="">抽奖</a></li>
          </ul>
        </div>
      </div>

      <div class="breadcrumb">
        <a href="#">全部分类</a>
        <span>></span>
        <a href="#">家用电器</a>
        <span>></span>
        <a href="#">空调</a>
      </div>

      <div class="goods_detail_con clearfix">
        <div class="goods_detail_pic fl"><img :src="'http://127.0.0.1:8000'+goods.pic"></div>
        <div class="goods_detail_list fr">
          <h3>{{ goods.name }}</h3>
          <p>{{ goods.specs }}</p>
          <div class="price_bar">
            <span class="show_pirce">¥<em>{{ goods.price }}</em></span>
            <a href="javascript:;" class="goods_judge">{{ goods.comments }}人评价</a>
          </div>
          <div class="goods_num clearfix">
            <div class="num_name fl">数 量：</div>
            <div class="num_add fl">
              <input type="text" class="num_show fl" value="1" v-model="number">
              <!--              <a href="javascript:;" class="add fr">+</a>-->
              <button class="add fr" @click="changenumber(1)">+</button>
              <button class="minus fr" @click="changenumber(2)">-</button>
              <!--              <a href="javascript:;" class="minus fr">-</a>-->
            </div>
          </div>

          <div class="total">总价：<em>{{ money }}元</em></div>
          <div class="operate_btn">
            <a href="javascript:;" class="add_cart" id="add_cart">加入购物车</a>
          </div>
        </div>
      </div>

      <div class="main_wrap clearfix">
        <div class="l_wrap fl clearfix">
          <div class="new_goods">
            <h3>热销排行</h3>
            <ul>
              <li>
                <a href="detail.html"><img src="../../../static/images/goods/goods001.jpg"></a>
                <h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="price">￥3.90</div>
              </li>
              <li>
                <a href="detail.html"><img src="../../../static/images/goods/goods002.jpg"></a>
                <h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
                <div class="price">￥16.80</div>
              </li>
            </ul>
          </div>
        </div>

        <div class="r_wrap fr clearfix">
          <ul class="detail_tab clearfix">
            <li class="active">商品详情</li>
            <li>规格与包装</li>
            <li>商品评价(1)</li>
            <li>售后服务</li>
          </ul>
          <div class="tab_content current">
            <dl>
              <dt>商品详情：</dt>
              <dd>{{goods.content}}
              </dd>
            </dl>
          </div>
          <div class="tab_content">
            <dl>
              <dt>规格与包装：</dt>
              <dd>它纤薄如刃，轻盈如羽，却又比以往速度更快、性能更强大。它为你展现的，是迄今最明亮、最多彩的 Mac
                笔记本显示屏。它更配备了触控栏，一个内置于键盘的玻璃面多点触控条，让你能在需要时快速取用各种工具。MacBook Pro 是对我们突破性理念的一场出色演绎，而它，也正期待着演绎你的奇思妙想。
              </dd>
            </dl>
          </div>
          <div class="tab_content">
            <ul class="judge_list_con">
              <li class="judge_list fl">
                <div class="user_info fl">
                  <img src="../../../static/images/cat.jpg">
                  <b>潇***啼</b>
                </div>
                <div class="judge_info fl">
                  <div class="stars_five"></div>
                  <div class="judge_detail">
                    派送非常快，第二天上午就收到。2天使用初步总结，前一部手机也是华为P9plus.MATE10pro包装原封未拆精致大气。拆开后第一眼就看到宝石蓝的手机，非常惊艳；然后就是配件一应俱全。开机各方面设置，把通讯录、短信等同步好，同品牌手机同步很快。和P9plus一样的后置指纹识别很方便。录制指纹容易，解锁非常快，秒开！屏幕完好，默认分辨率显示效果很好。
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="tab_content">
            <dl>
              <dt>售后服务：</dt>
              <dd>它纤薄如刃，轻盈如羽，却又比以往速度更快、性能更强大。它为你展现的，是迄今最明亮、最多彩的 Mac
                笔记本显示屏。它更配备了触控栏，一个内置于键盘的玻璃面多点触控条，让你能在需要时快速取用各种工具。MacBook Pro 是对我们突破性理念的一场出色演绎，而它，也正期待着演绎你的奇思妙想。
              </dd>
            </dl>
          </div>
        </div>
      </div>

      <div class="footer">
        <div class="foot_link">
          <a href="#">关于我们</a>
          <span>|</span>
          <a href="#">联系我们</a>
          <span>|</span>
          <a href="#">招聘人才</a>
          <span>|</span>
          <a href="#">友情链接</a>
        </div>
        <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
        <p>电话：010-****888 京ICP备*******8号</p>
      </div>
    </div>

    </body>
    </html>


  </div>
</template>

<script>
export default {
  name: "detail",
  data() {
    return {
      catelist: [],
      id: this.$route.query.id,
      goods: {},
      username: '',
      carts: '',
      money: 0,
      number: 1

    }
  },
  methods: {
    get_cate() {
      this.$axios.get('users/Home/')
        .then(res => {
          this.catelist = res.data.catelist
        })
    },
    get_good() {
      this.$axios.get('users/GoodsM/?id=' + this.id)
        .then(res => {
          this.goods = res.data.good
          this.money = this.goods.price
        })
    },
    changenumber(type) {
      if (type == 1) {
        this.money = parseFloat(this.money) + parseFloat(this.goods.price)
        this.number += 1

      } else {
        if (this.number > 1) {
          this.money = parseFloat(this.money) - parseFloat(this.goods.price)
          this.number -=1
        }
        else {
          alert('不能再减了')
        }
      }

    }
  },
  mounted() {
    this.get_cate()
    this.get_good()
  }
}
</script>

<style scoped>

</style>
